<template>
  <div :class="classNames">
    <!-- <headers
      :mode="computedMode"
      :change-page-show-date="changePageShowDate"
    ></headers> -->
    <div class="arco-calendar-body">
      <dataPick
        v-if="mode == 'date'"
        :header-value="headerValue"
        :header-operations="headerOperations"
        :value="panelValue"
        @cell-click="onPanelCellClick"
      ></dataPick>

      <weekPicker
        v-if="mode == 'week'"
        :header-value="headerValue"
        :header-operations="headerOperations"
        :value="panelValue"
        :day-start-of-week="dayStartOfWeek"
        :mode="mode"
        @cell-click="onPanelCellClick"
      ></weekPicker>

      <monthPicker
        v-if="mode == 'month'"
        :header-value="headerValue"
        :header-operations="headerOperations"
        :value="panelValue"
        :day-start-of-week="dayStartOfWeek"
        :mode="mode"
        @cell-click="onPanelCellClick"
      ></monthPicker>

      <yearPicker
        v-if="mode == 'year'"
        :header-value="headerValue"
        :header-operations="headerOperations"
        :value="panelValue"
        :day-start-of-week="dayStartOfWeek"
        :mode="mode"
        @cell-click="onPanelCellClick"
      ></yearPicker>
    </div>
  </div>
</template>

<script lang="ts">
import dayjs from "dayjs";
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
// import month from "./month.vue";
import dataPick from "./date-picker.vue";
import weekPicker from "./week-picker.vue";
import monthPicker from "./month-picker.vue";
import yearPicker from "./year-picker.vue";
import { useFormat } from "./hook";
// import headers from "./header.vue";

const Calendar = defineComponent({
  name: "Calendar",
  components: {
    dataPick,
    weekPicker,
    monthPicker,
    yearPicker,
    // headers,
  },
  props: {
    // 面板的值
    pickerValue: {
      type: [String, Number],
      default: void 0,
    },
    defaultPickerValue: {
      type: [String, Number],
      default: void 0,
    },
    modelValue: {
      type: [Object, String, Number],
      default: void 0,
    },
    defaultValue: {
      type: [Object, String, Number],
      default: void 0,
    },
    showTime: {
      type: Boolean,
    },
    // 值的fomat格
    format: {
      type: [String, Function],
      default: void 0,
    },
    // 值的format格式
    valueFormat: {
      type: String,
      default: void 0,
    },
    mode: {
      type: String,
      default: "date",
    },
    dayStartOfWeek: {
      type: Number,
      default: 0,
    },
  },
  emits: [
    "click",
    "panelChange",
    "change",
    "update:modelValue",
    "update:pickerValue",
  ],
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  setup(props, { emit }) {
    const prefixCls = "arco-calendar";

    const {
      format,
      modelValue,
      defaultValue,
      valueFormat,
      mode,
      defaultPickerValue,
      pickerValue,
    } = toRefs(props);

    const formatValue = (value, format) => {
      if (!value) return void 0;
      if (typeof value === "string") {
        if (dayjs(value, format).isValid()) {
          return dayjs(value, format);
        }
      }
      return dayjs(value);
    };

    const {
      format: computedFormat,
      valueFormat: returnValueFormat,
      parseValueFormat,
    } = useFormat(reactive({ format, mode, valueFormat }));

    console.log(computedFormat, "我嘿嘿一笑");
    const computedMode = computed(() => {
      return props.mode;
    });

    const computedModelValue = computed(() => {
      return formatValue(modelValue.value, parseValueFormat.value);
    });

    const computedModelDefaultValue = computed(() => {
      return formatValue(defaultValue.value, parseValueFormat.value);
    });

    const selectedValue = computed(
      () => computedModelValue.value || computedModelDefaultValue.value,
    );

    console.log(
      modelValue.value,
      parseValueFormat.value,
      computedModelValue,
      "我太耐",
    );
    const panelValue = computed(() => {
      return selectedValue.value;
    });

    watch(
      () => (selectedValue.value == null ? void 0 : selectedValue.value),
      (newVal) => {
        const newVals = newVal;
        setHeaderValue(newVals);
      },
    );

    const computedValue = computed(() => {
      return formatValue(
        pickerValue.value == null ? void 0 : pickerValue.value,
        parseValueFormat.value,
      );
    });

    const computedDefaultValue = computed(() => {
      return formatValue(
        defaultPickerValue.value == null ? void 0 : defaultPickerValue.value,
        parseValueFormat.value,
      );
    });

    const localValue = ref(computedDefaultValue.value || dayjs());
    const headerValue = computed(() => computedValue.value || localValue.value);
    const classNames = computed(() => [prefixCls]);

    const span = computed(
      () =>
        ({ date: 1, week: 1, year: 10 * 12, quarter: 12, month: 12 })[
          mode.value
        ],
    );
    const superSpan = computed(() =>
      ["year"].includes(mode.value) ? 10 * 12 : 12,
    );

    const showSingleBtn = computed(() => span.value !== superSpan.value);

    const headerOperations = computed(() => ({
      onSuperPrev: () => {
        setHeaderValue(dayjs(headerValue.value).subtract(superSpan.value, "M"));
      },
      onPrev: showSingleBtn.value
        ? () => {
            setHeaderValue(dayjs(headerValue.value).subtract(span.value, "M"));
          }
        : void 0,
      onNext: showSingleBtn.value
        ? () => {
            setHeaderValue(dayjs(headerValue.value).add(span.value, "M"));
          }
        : void 0,
      onSuperNext: () => {
        setHeaderValue(dayjs(headerValue.value).add(superSpan.value, "M"));
      },
    }));

    function changes(newVal) {
      const returnValue = dayjs(newVal);
      // const formattedValue = index$3.getFormattedValue(
      //   newVal,
      //   parseValueFormat.value,
      // );
      // const dateValue = date.getDateValue(newVal);
      // emit("picker-value-change", returnValue, dateValue, formattedValue);
      // pickerValue.value = returnValue;
      emit("update:pickerValue", returnValue);
      // console.log(returnValue, "我更新了吗");
    }

    const setLocalValue = (newVal) => {
      if (!newVal) return;
      localValue.value = newVal;
      console.log(localValue.value, "太多人了");
    };

    const setHeaderValue = (newVal) => {
      if (!newVal) return;
      changes(newVal);
      setLocalValue(newVal);
    };
    // const setHeaderValue = (newVal, emitChange = true) => {
    //   var _a;
    //   if (!newVal) return;
    //   if (emitChange && !isSame(headerValue.value, newVal)) {
    //     (_a = onChange == null ? void 0 : onChange.value) == null
    //       ? void 0
    //       : _a.call(onChange, newVal);
    //   }
    //   setLocalValue(newVal);
    // };

    function selectHandler(time, disabled = false) {
      if (!disabled) {
        move(time);
      }
    }

    function onChangePageDate(time) {
      // pageShowDate.value = time;
      emit("panelChange", time.toDate());
    }

    function move(time) {
      // _value.value = time;
      emit("change", time.toDate());
      emit("update:modelValue", time.toDate());
      onChangePageDate(time);
    }

    function onPanelCellClick(value) {
      const newValue = dayjs(value).format(returnValueFormat.value);
      emit("update:modelValue", newValue);

      const dateVal = dayjs(newValue) || dayjs();
      const timeVal = value || dayjs();

      console.log(dateVal, "我不知道？？");

      timeVal
        .set("year", dateVal.year())
        .set("month", dateVal.month())
        .set("date", dateVal.date());

      console.log(dayjs(timeVal).format("YYYY-MM-DD HH:mm:ss"), "我真服了");

      // onPanelSelect(newValue);
    }

    // function onPanelSelect(value) {
    //   if (needConfirm.value) {
    //     select(value, true);
    //   } else {
    //     confirm(value, false);
    //   }
    // }

    // function select(value, emitSelect) {
    //   console.log(value, emitSelect, "选中");
    //   // setProcessValue(value);
    //   // setPreviewValue(void 0);
    //   // setInputValue(void 0);
    //   // headerMode.value = void 0;
    //   // if (emitSelect) {
    //   //   const returnValue = value ? getReturnValue(value) : void 0;
    //   //   const formattedValue = index$3.getFormattedValue(
    //   //     value,
    //   //     parseValueFormat.value,
    //   //   );
    //   //   const dateValue = date.getDateValue(value);
    //   //   emit("select", returnValue, dateValue, formattedValue);
    //   // }
    // }

    // function confirm(value, showPanel, emitOk) {
    //   console.log(value, showPanel, emitOk, "ok");
    //   // if (isDisabledDate(value)) {
    //   //   return;
    //   // }
    //   // emitChange(value, emitOk);
    //   // setSelectedValue(value);
    //   // setProcessValue(void 0);
    //   // setPreviewValue(void 0);
    //   // setInputValue(void 0);
    //   // headerMode.value = void 0;
    //   // if (is.isBoolean(showPanel)) {
    //   //   setPanelVisible(showPanel);
    //   // }
    // }

    if (selectedValue.value == null ? void 0 : selectedValue.value) {
      setLocalValue(selectedValue.value);
    }

    return {
      classNames,
      // pageShowDate,
      computedMode,
      computedValue,
      selectHandler,
      panelValue,
      headerValue,
      headerOperations,
      onPanelCellClick,
    };
  },
});
export default Calendar;
</script>

<style lang="scss">
@import "./index.scss";
.arco-calendar {
  box-sizing: border-box;
  border: 1px solid $color-neutral-3;
}
</style>
